<template>
  <div class="dashboard">
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">{{ stats.bookCount }}</div>
            <div class="stat-label">图书总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">{{ stats.userCount }}</div>
            <div class="stat-label">用户总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">{{ stats.categoryCount }}</div>
            <div class="stat-label">分类数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">{{ stats.noteCount }}</div>
            <div class="stat-label">笔记数</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <div ref="bookChart" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div ref="userChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="table-row">
      <el-col :span="24">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最新图书</span>
            </div>
          </template>
          <el-table :data="latestBooks" style="width: 100%">
            <el-table-column prop="title" label="书名" />
            <el-table-column prop="author" label="作者" />
            <el-table-column prop="category" label="分类" />
            <el-table-column prop="createTime" label="创建时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  setup() {
    // 模拟统计数据
    const stats = ref({
      bookCount: 128,
      userCount: 25,
      categoryCount: 8,
      noteCount: 256
    })
    
    // 模拟最新图书数据
    const latestBooks = ref([
      { title: 'Vue.js设计与实现', author: '霍春阳', category: '技术', createTime: '2023-05-15' },
      { title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas', category: '技术', createTime: '2023-05-10' },
      { title: '重构：改善既有代码的设计', author: 'Martin Fowler', category: '技术', createTime: '2023-05-05' },
      { title: '代码大全', author: 'Steve McConnell', category: '技术', createTime: '2023-04-28' }
    ])
    
    const bookChart = ref(null)
    const userChart = ref(null)
    
    let bookChartInstance = null
    let userChartInstance = null
    
    onMounted(() => {
      initCharts()
    })
    
    const initCharts = () => {
      // 初始化图书统计图表
      bookChartInstance = echarts.init(bookChart.value)
      const bookOption = {
        title: {
          text: '图书分类统计'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['技术', '文学', '历史', '哲学', '艺术', '科学', '教育', '其他']
        },
        yAxis: {},
        series: [{
          type: 'bar',
          data: [45, 32, 18, 12, 8, 7, 5, 9]
        }]
      }
      bookChartInstance.setOption(bookOption)
      
      // 初始化用户活跃度图表
      userChartInstance = echarts.init(userChart.value)
      const userOption = {
        title: {
          text: '用户活跃度'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
          smooth: true
        }]
      }
      userChartInstance.setOption(userOption)
    }
    
    return {
      stats,
      latestBooks,
      bookChart,
      userChart
    }
  }
}
</script>

<style scoped>
.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}

.stat-content {
  padding: 20px 0;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.chart-container {
  width: 100%;
  height: 350px;
}

.table-card {
  height: 400px;
}

.card-header {
  text-align: left;
  font-size: 18px;
  font-weight: bold;
}
</style>